<template>
    <div class="lately-comments">
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <el-button style="padding: 3px 0" type="text">
                    <i class="fa fa-comments"></i>
                    最新评论
                </el-button>
            </div>
            <div v-for="comment in comments" class="text-item">
                <div class="message-left inline">
                    <el-image class="message-left-img" :src="comment.img" fit="fill"></el-image>
                </div>
                <div class="message-right talkbubble inline">
                    {{comment.message}}
                </div>
            </div>
        </el-card>
    </div>
</template>

<script>
    export default {
        name: "LatelyComments",
        data() {
            return {
                comments: [
                    {message: '我有一头小毛驴,我从来都不骑,有一天我心血来潮骑它去赶集,我从来都不骑我从来都不骑我从来都不骑', img: require('../assets/head-1.jpg')},
                    {message: '我从来都不骑', img: require('../assets/head-2.jpg')},
                    {message: '有一天我心血来潮骑它去赶集', img: require('../assets/head-3.jpg')},
                    {message: '有一天我心血来潮骑它去赶集', img: require('../assets/head-4.jpg')},
                    {message: '有一天我心血来潮骑它去赶集', img: require('../assets/head-5.jpg')}
                ]
            }
        }
    }
</script>

<style scoped>
    .lately-comments{
        margin-top: 20px;
    }

    .message-left {
        height: 50px;
        width: 50px;
    }

    .inline {
        display: inline-block;
        vertical-align: top;
    }

    .message-left-img {
        height: 50px;
        width: 50px;
        overflow: visible;

    }

    .message-right {
        height: 50px;
        margin-left: 15px;
        line-height: 50px;
        font-size: 12px;
        width: 80%;
    }

    .talkbubble {
        height: 50px;
        background: #efefef;
        position: relative;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
        border-radius: 10px;
        margin-bottom: 10px;
    }
    .talkbubble:before {
        content: "";
        position: absolute;
        right: 100%;
        top: 13px;
        width: 0;
        height: 0;
        border-top: 6px solid transparent;
        border-right: 12px solid #efefef;
        border-bottom: 6px solid transparent;
    }

    .text-item{
        width: 95%;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
    }

</style>